<template>
  <div class="basic-layout">
    <header class="header">
      <div class="logo">
        <router-link to="/">光合未来</router-link>
      </div>
      <nav class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/books">书库</router-link>
      </nav>
      <div class="user-info">
        <template v-if="userStore.isLoggedIn">
          <div class="user-avatar" @click="toggleUserMenu">
            <img :src="userStore.userInfo.avatar || '/default-avatar.png'" :alt="userStore.userInfo.username">
            <div class="user-menu" v-show="showUserMenu">
              <router-link to="/my" class="menu-item">
                <span>{{ userStore.userInfo.username }}</span>
              </router-link>
              <div class="menu-item" @click="handleLogout">退出登录</div>
            </div>
          </div>
        </template>
        <template v-else>
          <router-link to="/login" class="login-btn">登录</router-link>
        </template>
      </div>
    </header>
    
    <main class="main">
      <router-view></router-view>
      <slot></slot>
    </main>
    
    <footer class="footer">
      <div class="copyright">© 2024 光合未来. All Rights Reserved.</div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import { userApi } from '@/api'

const router = useRouter()
const userStore = useUserStore()
const showUserMenu = ref(false)

// 切换用户菜单显示状态
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

// 处理退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

// 点击其他区域关闭用户菜单
const closeUserMenu = (e) => {
  if (!e.target.closest('.user-avatar')) {
    showUserMenu.value = false
  }
}

userApi.getInfo().then((res) => {
  if (res.code === 200) {
    userStore.setUserInfo(res.data.userInfo)
    userStore.setToken(res.data.token)
  }
})

onMounted(() => {
  document.addEventListener('click', closeUserMenu)
})

onUnmounted(() => {
  document.removeEventListener('click', closeUserMenu)
})
</script>

<style scoped lang="scss">
.basic-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 0 20px;

    .logo {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .nav {
      flex: 1;
      margin: 0 40px;
      
      a {
        margin-right: 20px;
        color: #333;
        text-decoration: none;
        
        &:hover,
        &.router-link-active {
          color: #42b983;
        }
      }
    }

    .user-info {
      position: relative;
      
      .login-btn {
        color: #42b983;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }

      .user-avatar {
        cursor: pointer;
        position: relative;
        
        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          object-fit: cover;
        }

        .user-menu {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 8px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          padding: 8px 0;
          min-width: 120px;
          z-index: 1000;

          .menu-item {
            display: block;
            padding: 8px 16px;
            cursor: pointer;
            color: #333;
            
            &:hover {
              background: #f5f5f5;
            }

            &:not(:last-child) {
              border-bottom: 1px solid #eee;
            }
          }
        }
      }
    }
  }

  .main {
    flex: 1;
    padding: 20px;
  }

  .footer {
    height: 60px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>